<template>
    <div v-if="val && name" class="user-info-option only-text">
        <span class="user-info-option-name">{{name}} : </span>
        <span class="user-info-option-val">{{text}}</span>
    </div>
</template>

<script>
import { getText } from '_commonFn/string'

export default {
    name: 'WriteOption',
    props: {
        name: {
            type: String,
            default: ''
        },
        val: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            text: getText(this.val)
        }  
    },
}
</script>

<style lang="scss" scoped>
    .user-info-option {
        color: #999999;
        line-height: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        .user-info-option-name {
            color: #999999;
        }

        .user-info-option-val {
            color: #333333;
        }
    }
</style>